<!DOCTYPE html>
<html>
<head lang="en">
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>狼窝窝问答页面</title>
    <meta name="viewport"
          content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no,minimal-ui,viewport-fit=cover">
    <meta name="copyright" content="Copyright (c) 2006-2018 Luowogwo.">
    <meta name="format-detection" content="telephone=no,address=no">
    <meta name="referrer" content="always">
    <meta name="apple-mobile-web-app-capable" content="no">
    <meta name="apple-mobile-web-app-status-bar-style" content="no">
    <link href="/css/question/mobile+css+head_mobile+css+ui.css"
          rel="stylesheet" type="text/css">
    <link href="/css/question/new_ask2016.css" rel="stylesheet" type="text/css">

    <script src="/js/jquery/jquery.min.js"></script>
    <script src="/js/plugins/jrender/jrender.min.js"></script>
    <script src="/js/plugins/form/jquery.form.js"></script>
    <script src="/js/bootstrap-4.1.1-dist/js/bootstrap.min.js"></script>
    <link rel="stylesheet" href="/css/font/css/font-awesome.min.css"/>
    <link rel="stylesheet" href="/js/plugins/dialog2/dialog.css">
    <link href="/js/replyComment/dist/dialog.css" rel="stylesheet">
    <script src="/js/replyComment/dist/mDialogMin.js"></script>
    <script src="/js/plugins/dialog2/dialog.min.js"></script>
    <script src="/js/common.js"></script>
</head>

<script>
    $(function () {
        var params = getParams();
        if (params.id) {
            //回显回答内容
            $.get(baseUrl + "/questionReplies/" + params.id, function (data) {
                $("#answer").renderValues(data);
            });
        }
        //根据问题id查询回答列表
        //当前页
        var currentPage = 1;
        //总页数
        var pages;
        //声明一个用于存储问题的容器
        var replyCommentArr = [];

        function query() {
            //查询问题id对应的回答列表
            $.get(baseUrl + "/questionReplies/" + "/replyComments", {
                'reply.id': params.id,
                currentPage: currentPage
            }, function (data) {
                //把第二个数组合并第一个数组中
                $.merge(replyCommentArr, data.list);
                var json = {
                    list: replyCommentArr
                };
                //渲染数据
                $("#replyComment").renderValues(json, {
                    getHref: getHref(),
                });
                //获取总页数
                pages = data.pages;
            });
            currentPage++;

            //点击回复显示文本框
            $(".replyBtn").click(function () {
                var userStr = sessionStorage.getItem("user");
                var user;
                if (userStr) {
                    user = JSON.parse(userStr);
                } else {
                    Dialog.init('请先登录！', 1100);
                    return;
                }
                Dialog.init('<input type="text" placeholder="请输入至少5个字符"  style="margin:8px 0;width:100%;padding:11px 8px;font-size:15px; border:1px solid #999;"/>', {
                    title: '评论点什么吧！',
                    button: {
                        确定: function () {
                            if (this.querySelector('input').value.length >= 5) {
                                Dialog.init('你输入的内容是：' + this.querySelector('input').value);
                                var commentContent = this.querySelector('input').value;
                                $.post(baseUrl + "/questionReplies/" + "/replyComments", {
                                        'reply.id': params.id,
                                        commentContent: commentContent
                                    },
                                    function (data) {
                                    });
                                Dialog.close(this);
                                window.location.reload(true);
                            } else {
                                Dialog.init('你输入的内容不符合要求！', 1100);
                            }
                        },
                        关闭: function () {
                            Dialog.close(this);
                        }
                    }
                });
            })
        }

        query();//先查询一次,页面才有数据

        //绑定更多回答事件
        $("#moreReplyComment").click(function () {
            //如果是小于总页数就发送请求
            if (currentPage <= pages) {
                query();
            } else {
                $(document).dialog({
                    type: 'notice',
                    content: '<span class="info-text">没有更多的评论了!</span>',
                    autoClose: 1500
                });
            }
        });

    })
</script>
</head>

<body>
<div id="pos38"></div>
<header class="head2home">
    <a href="/" class="logo">
    </a>
    <div class="rBtn">
        <a href="/index.html" class="home">首页</a>
    </div>
</header>
<section class="ans-list a-list">
    <ul class="_j_pager_box">
        <div id="answer">
            <li>
                <div class="clearfix">
                    <div class="rol">
                        <p>
                            <img style="border-radius: 30px" render-src="replyUser.headImgUrl"
                                 width="40px">
                            <span render-html="replyUser.nickName" style="font-size: 15px"></span>&nbsp;
                            答于&nbsp;<span class="time" render-html="replyTime" style="font-size: 13px"></span>
                        </p>
                        <h2 render-html="replyContent"></h2>
                    </div>
                    <br>
                </div>
            </li>
        </div>
        <div id="replyComment">
            <li>
                <div render-loop="list">
                    <div class="clearfix">
                        <div class="rol">
                            <p>
                                <img style="border-radius: 30px" render-src="list.commentUser.headImgUrl"
                                     width="40px">
                                <span render-html="list.commentUser.nickName" style="font-size: 15px"></span>&nbsp;
                                评论于&nbsp;<span class="time" render-html="list.commentTime"
                                               style="font-size: 13px"></span>
                            </p>
                        </div>
                        <br>
                        <div class="ans-nr">
                            <div class="clearfix">
                                <p render-html="list.commentContent"></p>
                            </div>
                        </div>
                        <br>
                    </div>
                </div>
            </li>
        </div>
    </ul>
    <div style="margin-bottom: 65px;" id="moreReplyComment">
        <a class="more-list _j_add_more_button">更多评论</a>
    </div>
</section>
<section class="askfoot">
    <a class="btn-que replyBtn" data-cs-p="show_publish"><i></i>
        我要评论
    </a>
</section>


</body>

</html>